<template>
  <div class="home-page">
    <!-- 头部横幅 -->
    <div class="hero-section">
      <div class="hero-content">
        <h1 class="hero-title">
          <el-icon class="title-icon"><Magic /></el-icon>
          AI 多模态模型平台
        </h1>
        <p class="hero-subtitle">基于先进AI技术的智能助手，为您提供全方位的智能服务</p>
        <div class="hero-actions">
          <el-button 
            type="primary" 
            size="large"
            :icon="ChatDotRound"
            @click="startChat"
            class="primary-action"
          >
            开始对话
          </el-button>
          <el-button 
            size="large"
            :icon="Tools"
            @click="openTools"
            class="secondary-action"
          >
            探索工具
          </el-button>
        </div>
      </div>
      <div class="hero-visual">
        <div class="floating-cards">
          <div class="card card-1">🤖 智能对话</div>
          <div class="card card-2">🎨 图像生成</div>
          <div class="card card-3">📊 数据分析</div>
          <div class="card card-4">🎵 音频处理</div>
        </div>
      </div>
    </div>

    <!-- 功能特性 -->
    <div class="features-section">
      <div class="section-header">
        <h2>核心功能</h2>
        <p>强大的AI能力，满足您的各种需求</p>
      </div>
      
      <el-row :gutter="24" class="features-grid">
        <el-col :xs="24" :sm="12" :md="6" v-for="feature in features" :key="feature.id">
          <div class="feature-card" @click="handleFeatureClick(feature)">
            <div class="feature-icon" :style="{ backgroundColor: feature.color }">
              <el-icon :size="32"><component :is="feature.icon" /></el-icon>
            </div>
            <h3>{{ feature.title }}</h3>
            <p>{{ feature.description }}</p>
            <div class="feature-tags">
              <el-tag 
                v-for="tag in feature.tags" 
                :key="tag"
                size="small"
                effect="plain"
              >
                {{ tag }}
              </el-tag>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>

    <!-- 快速操作 -->
    <div class="quick-actions-section">
      <div class="section-header">
        <h2>快速开始</h2>
        <p>选择您需要的服务，立即体验AI的强大能力</p>
      </div>
      
      <div class="action-cards">
        <div class="action-card primary" @click="startChat">
          <div class="action-icon">
            <el-icon :size="48"><ChatDotRound /></el-icon>
          </div>
          <div class="action-content">
            <h3>智能对话</h3>
            <p>与AI进行自然语言对话，获取智能回答和建议</p>
            <el-button type="primary" :icon="ArrowRight">
              立即开始
            </el-button>
          </div>
        </div>
        
        <div class="action-card secondary" @click="openTools">
          <div class="action-icon">
            <el-icon :size="48"><Tools /></el-icon>
          </div>
          <div class="action-content">
            <h3>工具集</h3>
            <p>使用各种AI工具，提升您的工作效率</p>
            <el-button type="primary" plain :icon="ArrowRight">
              探索工具
            </el-button>
          </div>
        </div>
        
        <div class="action-card secondary" @click="openHistory">
          <div class="action-icon">
            <el-icon :size="48"><Clock /></el-icon>
          </div>
          <div class="action-content">
            <h3>对话历史</h3>
            <p>查看和管理您的历史对话记录</p>
            <el-button type="primary" plain :icon="ArrowRight">
              查看历史
            </el-button>
          </div>
        </div>
      </div>
    </div>

    <!-- 统计数据 -->
    <div class="stats-section">
      <div class="section-header">
        <h2>平台数据</h2>
        <p>实时统计，展示平台使用情况</p>
      </div>
      
      <el-row :gutter="24" class="stats-grid">
        <el-col :xs="12" :sm="6" v-for="stat in stats" :key="stat.label">
          <div class="stat-card">
            <div class="stat-number">{{ stat.value }}</div>
            <div class="stat-label">{{ stat.label }}</div>
            <div class="stat-change" :class="stat.trend">
              <el-icon><component :is="stat.trendIcon" /></el-icon>
              {{ stat.change }}
            </div>
          </div>
        </el-col>
      </el-row>
    </div>

    <!-- 最近活动 -->
    <div class="activity-section" v-if="recentActivities.length > 0">
      <div class="section-header">
        <h2>最近活动</h2>
        <el-button type="text" @click="refreshActivities">
          <el-icon><Refresh /></el-icon>
          刷新
        </el-button>
      </div>
      
      <div class="activity-list">
        <div 
          v-for="activity in recentActivities" 
          :key="activity.id"
          class="activity-item"
        >
          <div class="activity-icon">{{ activity.icon }}</div>
          <div class="activity-content">
            <h4>{{ activity.title }}</h4>
            <p>{{ activity.description }}</p>
            <div class="activity-meta">
              <span class="activity-time">{{ activity.time }}</span>
              <el-tag size="small" :type="activity.type">{{ activity.category }}</el-tag>
            </div>
          </div>
          <div class="activity-action">
            <el-button type="text" size="small">查看详情</el-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import {
  ChatDotRound,
  Tools,
  Clock,
  ArrowRight,
  Refresh,
  TrendCharts,
  Document,
  Picture,
  ArrowUp,
  ArrowDown
} from '@element-plus/icons-vue'

const router = useRouter()

// 功能特性数据
const features = ref([
  {
    id: 1,
    title: '智能对话',
    description: '与AI进行自然语言对话，获取智能回答和建议',
    icon: ChatDotRound,
    color: '#667eea',
    tags: ['自然语言', '上下文理解', '多轮对话'],
    route: '/chat'
  },
  {
    id: 2,
    title: '图像生成',
    description: '使用AI生成高质量图像作品，支持多种风格',
    icon: Picture,
    color: '#f56565',
    tags: ['AI绘画', '风格转换', '图像编辑'],
    route: '/tools'
  },
  {
    id: 3,
    title: '数据分析',
    description: 'AI驱动的数据分析和可视化，洞察数据价值',
    icon: TrendCharts,
    color: '#48bb78',
    tags: ['统计分析', '可视化', '预测建模'],
    route: '/tools'
  },
  {
    id: 4,
    title: '文档处理',
    description: '智能文档分析、摘要生成和内容提取',
    icon: Document,
    color: '#ed8936',
    tags: ['文档解析', '内容摘要', '信息提取'],
    route: '/tools'
  }
])

// 统计数据
const stats = ref([
  {
    label: '总对话次数',
    value: '12,458',
    change: '+12.5%',
    trend: 'up',
    trendIcon: ArrowUp
  },
  {
    label: '活跃用户',
    value: '3,267',
    change: '+8.2%',
    trend: 'up',
    trendIcon: ArrowUp
  },
  {
    label: '工具使用',
    value: '45,892',
    change: '-2.1%',
    trend: 'down',
    trendIcon: ArrowDown
  },
  {
    label: '满意度',
    value: '98.5%',
    change: '+0.8%',
    trend: 'up',
    trendIcon: ArrowUp
  }
])

// 最近活动
const recentActivities = ref([
  {
    id: 1,
    icon: '💬',
    title: 'AI对话',
    description: '与AI助手讨论了Spring AI框架的技术问题',
    time: '2分钟前',
    category: '对话',
    type: 'primary'
  },
  {
    id: 2,
    icon: '🖼️',
    title: '图像生成',
    description: '生成了4张艺术风格的图像作品',
    time: '1小时前',
    category: '创作',
    type: 'success'
  },
  {
    id: 3,
    icon: '📈',
    title: '数据分析',
    description: '完成了销售数据的智能分析报告',
    time: '3小时前',
    category: '分析',
    type: 'warning'
  },
  {
    id: 4,
    icon: '📄',
    title: '文档处理',
    description: '对技术文档进行了智能摘要和关键词提取',
    time: '5小时前',
    category: '处理',
    type: 'info'
  }
])

// 开始对话
const startChat = () => {
  router.push('/chat')
}

// 打开工具集
const openTools = () => {
  router.push('/tools')
}

// 打开对话历史
const openHistory = () => {
  router.push('/history')
}

// 处理功能点击
const handleFeatureClick = (feature: any) => {
  if (feature.route) {
    router.push(feature.route)
  } else {
    ElMessage.info(`${feature.title}功能正在开发中...`)
  }
}

// 刷新活动
const refreshActivities = () => {
  ElMessage.success('活动列表已刷新')
}

// 页面加载时的初始化
onMounted(() => {
  console.log('Home page loaded')
})
</script>

<style scoped>
.home-page {
  min-height: 100vh;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
}

/* 头部横幅 */
.hero-section {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 80px 40px;
  max-width: 1400px;
  margin: 0 auto;
  gap: 60px;
}

.hero-content {
  flex: 1;
  max-width: 600px;
}

.hero-title {
  font-size: 3.5rem;
  font-weight: 700;
  color: #2d3748;
  margin-bottom: 20px;
  line-height: 1.2;
  display: flex;
  align-items: center;
  gap: 16px;
}

.title-icon {
  color: #667eea;
  font-size: 3rem;
}

.hero-subtitle {
  font-size: 1.25rem;
  color: #4a5568;
  margin-bottom: 40px;
  line-height: 1.6;
}

.hero-actions {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}

.primary-action {
  height: 48px;
  padding: 0 32px;
  font-size: 16px;
  font-weight: 600;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border: none;
  border-radius: 12px;
}

.primary-action:hover {
  background: linear-gradient(135deg, #5a6fd8 0%, #6a4190 100%);
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4);
}

.secondary-action {
  height: 48px;
  padding: 0 32px;
  font-size: 16px;
  font-weight: 600;
  border-radius: 12px;
}

.hero-visual {
  flex: 1;
  max-width: 500px;
  position: relative;
}

.floating-cards {
  position: relative;
  height: 400px;
}

.card {
  position: absolute;
  background: white;
  padding: 20px;
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  font-weight: 600;
  font-size: 14px;
  animation: float 6s ease-in-out infinite;
}

.card-1 {
  top: 20px;
  left: 20px;
  animation-delay: 0s;
}

.card-2 {
  top: 80px;
  right: 40px;
  animation-delay: 1.5s;
}

.card-3 {
  bottom: 120px;
  left: 60px;
  animation-delay: 3s;
}

.card-4 {
  bottom: 40px;
  right: 20px;
  animation-delay: 4.5s;
}

@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-20px); }
}

/* 通用区块样式 */
.section-header {
  text-align: center;
  margin-bottom: 60px;
}

.section-header h2 {
  font-size: 2.5rem;
  font-weight: 700;
  color: #2d3748;
  margin-bottom: 16px;
}

.section-header p {
  font-size: 1.125rem;
  color: #4a5568;
}

/* 功能特性 */
.features-section {
  padding: 80px 40px;
  background: white;
}

.features-grid {
  max-width: 1200px;
  margin: 0 auto;
}

.feature-card {
  background: white;
  border-radius: 20px;
  padding: 32px;
  text-align: center;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
  cursor: pointer;
  border: 2px solid transparent;
  height: 100%;
}

.feature-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
  border-color: #667eea;
}

.feature-icon {
  width: 80px;
  height: 80px;
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 24px;
  color: white;
  box-shadow: 0 8px 25px rgba(102, 126, 234, 0.3);
}

.feature-card h3 {
  font-size: 1.5rem;
  font-weight: 600;
  color: #2d3748;
  margin-bottom: 12px;
}

.feature-card p {
  color: #4a5568;
  line-height: 1.6;
  margin-bottom: 20px;
}

.feature-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}

.feature-tags .el-tag {
  background: rgba(102, 126, 234, 0.1);
  color: #667eea;
  border: 1px solid rgba(102, 126, 234, 0.2);
}

/* 快速操作 */
.quick-actions-section {
  padding: 80px 40px;
  background: #f8fafc;
}

.action-cards {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 24px;
}

.action-card {
  background: white;
  border-radius: 20px;
  padding: 32px;
  display: flex;
  align-items: center;
  gap: 24px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
  cursor: pointer;
}

.action-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
}

.action-card.primary {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
}

.action-card.primary .action-content h3,
.action-card.primary .action-content p {
  color: white;
}

.action-icon {
  flex-shrink: 0;
}

.action-card.primary .action-icon {
  color: white;
}

.action-content {
  flex: 1;
}

.action-content h3 {
  font-size: 1.5rem;
  font-weight: 600;
  color: #2d3748;
  margin-bottom: 8px;
}

.action-content p {
  color: #4a5568;
  line-height: 1.5;
  margin-bottom: 16px;
}

/* 统计数据 */
.stats-section {
  padding: 80px 40px;
  background: white;
}

.stats-grid {
  max-width: 1200px;
  margin: 0 auto;
}

.stat-card {
  text-align: center;
  padding: 32px;
  background: #f8fafc;
  border-radius: 16px;
  transition: all 0.3s ease;
}

.stat-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

.stat-number {
  font-size: 2.5rem;
  font-weight: 700;
  color: #2d3748;
  margin-bottom: 8px;
}

.stat-label {
  font-size: 1rem;
  color: #4a5568;
  margin-bottom: 12px;
}

.stat-change {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  font-size: 0.875rem;
  font-weight: 600;
}

.stat-change.up {
  color: #48bb78;
}

.stat-change.down {
  color: #f56565;
}

/* 最近活动 */
.activity-section {
  padding: 80px 40px;
  background: #f8fafc;
}

.activity-list {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  gap: 16px;
}

.activity-item {
  background: white;
  border-radius: 16px;
  padding: 24px;
  display: flex;
  align-items: center;
  gap: 20px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
}

.activity-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
}

.activity-icon {
  font-size: 2rem;
  flex-shrink: 0;
}

.activity-content {
  flex: 1;
}

.activity-content h4 {
  font-size: 1.125rem;
  font-weight: 600;
  color: #2d3748;
  margin-bottom: 4px;
}

.activity-content p {
  color: #4a5568;
  margin-bottom: 8px;
}

.activity-meta {
  display: flex;
  align-items: center;
  gap: 12px;
}

.activity-time {
  font-size: 0.875rem;
  color: #718096;
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .hero-section {
    flex-direction: column;
    text-align: center;
    gap: 40px;
  }
  
  .hero-content {
    max-width: 100%;
  }
  
  .action-cards {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .hero-section {
    padding: 60px 20px;
  }
  
  .hero-title {
    font-size: 2.5rem;
    flex-direction: column;
    gap: 8px;
  }
  
  .hero-actions {
    justify-content: center;
  }
  
  .features-section,
  .quick-actions-section,
  .stats-section,
  .activity-section {
    padding: 60px 20px;
  }
  
  .section-header h2 {
    font-size: 2rem;
  }
  
  .action-card {
    flex-direction: column;
    text-align: center;
  }
  
  .activity-item {
    flex-direction: column;
    text-align: center;
  }
  
  .activity-meta {
    flex-direction: column;
    gap: 8px;
  }
}
</style>